<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
	<title>湖南省自来水公司营销管理信息系统</title> 
	
	<link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title" />	
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title" />	
	
	<link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title" />
	
	<link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
	<script src="../js/jquery/jquery-3.3.1.js"></script>
	<script src="/webjars/vue/2.5.17/dist/vue.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../layui/layui.all.js" type="text/javascript" ></script>
</head> 
 
<body> 

<div id="wrapper">

	<div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>


	<div id="content" class="xgrid" >

		<div class="x12">
			
			<h2>水表周检报表</h2>
			<script>
			function changeMeter(val){
				$("#month").html(val);
				//content.querybylike();

			}
			</script>
			<div>
				表龄大于 <input style="width:30px;text-align:right;" value="24"/> 个月
				<button class="btn btn-small btn-icon btn-find" onclick="changeMeter(this.value)"><span></span>查询</button>
			</div>
			
			
			<div class="reportTitle">
				表龄大于 <span id="month" id="month"></span> 个月的水表
			</div>	
			<div class="height24">
				<div style="float:left;width:200px;">共计 26 块水表</div>
			</div>
			<table class="report">
				<thead>
					<tr>
						
						<th width="100">用户编码</th>
						<th width="100">用户姓名</th>
						<th width="100">表身码</th>
						<th width="100">水表类型</th>
						<th width="80">水表口径</th>
						<th width="100">装表日期</th>
						<th width="80">表龄（月）</th>
						<th>水表厂家</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="c in changemeter">
						<td class="center" v-text="c.UserNo">加载中...</td>
						<td class="left" v-text="c.UserName">加载中...</td>
						<td class="center" v-text="c.MeterName">加载中...</td>
						<td class="center" v-text="c.MeterTypeName">加载中...</td>
						<td class="center" v-text="c.Aperture">加载中...</td>
						<td class="center" v-text="c.SetupDate">加载中...</td>
						<td class="center" v-text="c.age">加载中...</td>
						<td v-text="c.Factory">加载中...</td>
					</tr>
					</tbody>
				</table>
				<div class="page">
					<a href="#" @click="query()">第一页</a>
					<a  href="javascript:;" @click="query(pageInfo.current-1)" v-if="pageInfo.current!=1">上一页</a>
					<input class="pageIndex" :value="pageInfo.current"/> / <input class="pageCount" readonly="readonly" :value="pageInfo.pages" />
					<a href="#" @click="query(pageInfo.current+1)"  v-if="pageInfo.current!=pageInfo.pages && pageInfo.pages!=0">下一页</a>
					<a href="#" @click="query(pageInfo.pages-0)">第未页</a>
				</div>
				
		</div> <!-- .x12 -->
		
	</div> <!-- #content -->
	<script>
		var content=new Vue({
			el:"#content",
			data:{
				month:"",
				metervalue:"",
				pageInfo:"",
				changemeter:{
					current:"",
					month:"",
				}
			},
			methods:{
				querybylike(){
					content.changemeter.month=$("#month").val();
					$.getJSON("/rd-read/metervalue",content.changemeter,function(json){
						content.metervalue=json.records;
						content.pageInfo=json;
					});
				},
				query(current){
					content.changemeter.current=current;
					$.getJSON("/rd-read/metervalue",content.changemeter,function(json){
						content.metervalue=json.records;
						content.pageInfo=json;
					});
				}
			},
			created(){
				$.getJSON("/rd-read/metervalue",function(json){
					content.metervalue=json.records;
					content.pageInfo=json;
				});
			}


		})
	</script>
	<div id="footer">		
		<div class="content_pad">			
			<p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>.   技术支持 <a href="#">职业教育</a>.</p>
		</div> <!-- .content_pad -->
	</div> <!-- #footer -->
	
</div> <!-- #wrapper -->

<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>
<script src="../My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript">
	
$(document).ready ( function () 
{
	Dashboard.init ();
	
});


</script>

</body> 
 
</html>